<script setup lang="ts">
  import { ref, computed, watch, reactive, onMounted } from 'vue';
  import { useBooleanStore } from '@/store';
  import { ERPLogSearch } from '@/api/operation-monitoring';
  import { ERPLogSearchParam } from '@/api/operation-monitoring/types';
  import { Notification } from '@arco-design/web-vue';

  const booleanStore = useBooleanStore();
  const emit = defineEmits(['updateArray']);
  const pageSize = ref<number>(10);
  const pageNumber = ref<number>(1);
  const rangeDate = ref<Date[]>([]);
  const options = [
    {
      label: '成品扫码移交',
      value: '101-ERP-scanDeliveryCp',
    },
    {
      label: '零件扫码移交',
      value: '101-ERP-scanDeliveryLj',
    },
    {
      label: '标准件扫码移交',
      value: '101-ERP-scanDeliveryBzj',
    },
    {
      label: '零件扫码接收',
      value: '101-ERP-scanRecieveLj',
    },
    {
      label: '成品扫码接收',
      value: '101-ERP-scanRecieveCp',
    },
    {
      label: '标准件接收',
      value: '101-ERP-scanRecieveBzj',
    },
    {
      label: '零件预上账',
      value: 'ERP-101-preConfirmLj',
    },
    {
      label: '成品预上账',
      value: 'ERP-101-preConfirmCp',
    },
    {
      label: '标准件预上账',
      value: 'ERP-101-preConfirmBzj',
    },
    {
      label: 'MES-101扫码移交',
      value: 'MES-101-ShopMaterialDelivery',
    },
    {
      label: 'MES-101现场驳回',
      value: 'MES-101-ShopReturnMaterial',
    },
    {
      label: 'MES-101专业厂接收',
      value: 'MES-101-ShopMaterialRece',
    },
    {
      label: 'MES-101物料正常退库',
      value: '101-ERP-itemBackToMsms4LjCp',
    },
    {
      label: 'MES-101二次配套',
      value: 'MES-101-SendSecondMatch',
    },
    {
      label: 'MES-101物料变更',
      value: 'MES-101-SenceMaterialBg',
    },
    {
      label: 'MES-101现场物料检验',
      value: 'MES-101-MakeMaterialCheck',
    },
    {
      label: '成品删除预上账',
      value: 'ERP-101-delConfirmCp',
    },
    {
      label: '零件删除预上账',
      value: 'ERP-101-delConfirmLj',
    },
    {
      label: '标准件删除预上账',
      value: 'ERP-101-delConfirmBzj',
    },
    {
      label: 'ERP出库占用',
      value: 'ERP-101-InvOutAllot',
    },
    {
      label: 'ERP出库占用取消',
      value: 'ERP-101-InvOutAllotCancel',
    },
    {
      label: 'ERP出库',
      value: 'ERP-101-InvOut',
    },
    {
      label: 'ERP出库撤销',
      value: 'ERP-101-InvOutCancel',
    },
    {
      label: 'ERP退库反馈信息',
      value: 'ERP-101-returnApplyReceived',
    },
    {
      label: '定时任务重推',
      value: 'Scheduled',
    },
  ];
  const feedResult = [
    {
      label: '全部',
      value: 'all',
    },
    {
      label: '成功',
      value: '1',
    },
    {
      label: '失败',
      value: '0',
    },
  ];
  const formValues = reactive({
    msgId: '',
    issuedType: '',
    itemCode: '',
    qualityCode: '',
    barcode: '',
    deliveryPlanCode: '',
    mesCheckQualiticationId: '',
    startTime: '',
    endTime: '',
    result: '',
    businessVal: '',
    isQueryDelivery: '',
  });
  // 发送搜索数据
  const flowQueryData = computed<ERPLogSearchParam>(() => ({
    queryParam: {
      msgId: formValues.msgId,
      issuedType: formValues.issuedType,
      itemCode: formValues.itemCode,
      qualityCode: formValues.qualityCode,
      barcode: formValues.barcode,
      deliveryPlanCode: formValues.deliveryPlanCode,
      mesCheckQualiticationId: formValues.mesCheckQualiticationId,
      startTime: formValues.startTime,
      endTime: formValues.endTime,
      result: formValues.result,
      businessVal: formValues.businessVal,
      isQueryDelivery: formValues.isQueryDelivery,
    },
    page: {
      pageSize: pageSize.value,
      currentPage: pageNumber.value,
      total: 0,
      pageRandom: [20, 50],
    },
  }));
  async function handleSearch() {
    const newData = await ERPLogSearch(flowQueryData.value);
    if (newData) {
      emit('updateArray', newData);
    } else {
      Notification.error({
        title: '失败',
        content: newData.message ? newData.message : '查询失败',
        closable: true,
      });
    }
  }
  function reset() {
    Object.keys(formValues).forEach((key) => {
      (formValues as Record<string, any>)[key] = '';
    });
    rangeDate.value = [];
    setTimeout(() => {
      handleSearch();
    }, 150);
  }
  onMounted(() => {
    handleSearch();
  });
  watch(rangeDate, () => {
    if (rangeDate.value && rangeDate.value.length >= 2) {
      formValues.startTime = rangeDate.value[0].toString();
      formValues.endTime = rangeDate.value[1].toString();
    }
  });
  // 监听分页
  watch([() => booleanStore.pageNum, () => booleanStore.pageSize], () => {
    if (booleanStore.num5 === 38) {
      pageNumber.value = booleanStore.pageNum;
      pageSize.value = booleanStore.pageSize;
      handleSearch();
    }
  });
  defineExpose({ handleSearch });
</script>

<template>
  <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
    <a-col :span="6">
      <a-input
        v-model="formValues.msgId"
        placeholder="传输标识"
        size="large"
        @press-enter="handleSearch"
      />
    </a-col>
    <a-col :span="6">
      <a-input
        v-model="formValues.businessVal"
        placeholder="业务主键"
        size="large"
        @press-enter="handleSearch"
      />
    </a-col>
    <a-col :span="6">
      <a-input
        v-model="formValues.deliveryPlanCode"
        placeholder="交接单号"
        size="large"
        @press-enter="handleSearch"
      />
    </a-col>
    <a-col :span="6">
      <a-input
        v-model="formValues.itemCode"
        placeholder="图号"
        size="large"
        @press-enter="handleSearch"
      />
    </a-col>
    <a-col :span="6">
      <a-input
        v-model="formValues.qualityCode"
        placeholder="质量编号"
        size="large"
        @press-enter="handleSearch"
      />
    </a-col>
    <a-col :span="6">
      <a-input
        v-model="formValues.barcode"
        placeholder="条码"
        size="large"
        @press-enter="handleSearch"
      />
    </a-col>
    <a-col :span="6">
      <a-input
        v-model="formValues.mesCheckQualiticationId"
        placeholder="合格证"
        size="large"
        @press-enter="handleSearch"
      />
    </a-col>
    <a-col :span="6">
      <a-select
        v-model="formValues.issuedType"
        placeholder="反馈类型"
        @press-enter="handleSearch"
      >
        <a-option v-for="item of options" :key="item.value" :value="item.value"
          >{{ item.label }}
        </a-option>
      </a-select>
    </a-col>
    <a-col :span="6">
      <a-select
        v-model="formValues.result"
        placeholder="反馈结果"
        @press-enter="handleSearch"
      >
        <a-option
          v-for="item of feedResult"
          :key="item.value"
          :value="item.value"
          >{{ item.label }}
        </a-option>
      </a-select>
    </a-col>
    <a-col :span="12">
      <a-range-picker v-model:model-value="rangeDate" />
    </a-col>
  </a-row>
  <div style="margin-top: 16px">
    <a-button type="primary" size="large" @click="handleSearch">查询</a-button>
    <a-button class="btn-reset" size="large" @click="reset">重置</a-button>
  </div>
</template>

<style scoped>
  span {
    margin-bottom: 16px;
  }
  .btn-reset {
    margin-left: 10px;
  }
</style>
